<template>
    <div>
        <div class="picTop" >
            <img :src="songPig.avatar_s180" alt="">
            <p>{{songPig.name}}</p>
            <div :style="{'background-image':'url('+songPig.avatar_s180+')','background-repeat':'no-repeat',opacity:0.1,'background-size':'100%'}"></div>
        </div>
        <div class="singsBottom">
            <ul>
                <li v-for="(item,index) in songListD" :key="index">{{item.title}}</li>
            </ul>
        </div>
    </div>
</template>

<script>
    import {getsingerList} from "../api/InterFacelibrary";

    export default {
        name: "singerDetails.vue",
        data(){
            return {
                songListD:[],
                songPig:[]
            }
        },
        created() {

            getsingerList(20,this.$route.query.singer).then(res => {
                    console.log(res)
                  this.songPig=res.artistinfo
                this.songListD=res.songlist
                    console.log(this.songListD)
                });
            }


    }
</script>

<style scoped lang="less">
.picTop {
    margin-top: 20px;
    height: 150px;
    text-align: center;
    border-bottom: 1px solid #eaeaea;
    div {
        height: 170px;
        position: relative;
        z-index: auto;
        top: -180px;
    }
   img {
       height: 100px;
       width: 100px;
       border-radius: 50%;
       background-repeat: no-repeat;
       background-color: rgba();
   }
}
    .singsBottom {
        background-color: #eeeeee;
        height: calc(100vh - 200px);
        overflow: scroll;
        ul {
            li {
                margin: 0px 20px;
                height: 50px;
                line-height: 50px;
                border-bottom: 1px solid #aaa;
            }
        }
    }
</style>